<template>
	<mk-echart :options="options" :key="key"></mk-echart>
</template>

<script>
	import MkEchart from '../../libs/index.vue'
	export default {
		name: 'echarttwo',
		components: {
			MkEchart
		},
		props: {
			titleText: {
				type: String,
				default: ''
			},
			xData: {
				type: Array,
				default: () => []
			},
			yData: {
				type: Array,
				default: () => []
			},
			lineData: { // 折线图坐标
				type: Array,
				default: () => []
			},
			verticalX: { // 垂直x轴坐标
				type:[String, Number],
				default:''
			},
			NORMALTIT: {
				type:[String, Number],
				default: ''
			}
		},
		watch: {
			xData: {
				deep: true,
				immediate:true,
				handler(val) {
					this.$nextTick(() => {
						this.key = new Date().getTime();
					})
				}
			},
			yData: {
				deep: true,
				immediate:true,
				handler(newVal, oldVal) {
					this.yData = newVal
					this.setOptions()
				}
			}
		},
		data() {
			return {
				key: new Date().getTime(),
				val: 0,
				options: {}
			}
		},
		mounted() {
			this.setOptions()
		},
		methods: {
			setOptions() {
				let options = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					grid: {
						top:'10%',
						left: '-10%',
						right: '-5%',
						bottom: '0%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						show: false,
						axisTick:{show:false},
						axisLine:{show:false},
						data: this.xData,
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [
						{
							show: false
						},
						{
							show: false
						}
					],
					series: [{
							type: 'bar',
							barCategoryGap: 0,
							itemStyle: {
								color: '#EDEDF0',
								borderColor: '#A4A3A8',
							},
							yAxisIndex: 0,
							data: this.yData,
							markLine: {
								symbol: ['none', 'none'],
								lineStyle: {
									normal: {
										type: 'solid',
										color: '#D71B21',
										width: 5
									}
								},
								label: {
									normal: {
										show: true,
										position: 'end',
										formatter:  this.NORMALTIT ? this.NORMALTIT + '%' : '', // 显示数字
									}
								},
								data: [
									[
										{
											x: 150,
											y: 10000,
										},
										{
											y: 60, // 高度
											xAxis: this.verticalX,
										}
									],
								]
							}
						},
						{
							type: 'line',
							symbol: 'none',
							smoothMonotone: 'y',
							yAxisIndex: 1,
							itemStyle: {
								color: '#D71B21',
							},
							data: this.lineData
						}
					]
				}
				
				this.options = options
			}
		}

	}
</script>

<style>
</style>
